<template>
  <view class="background">
    <view class="first-container">
      <view>考试课程</view>
      <select v-model="course" style="width: 94%;height: 40px;border-radius: 5px;border: 1px solid #cccccc">
        <option value="" disabled selected>请选择考试课程</option>
        <view v-for="(item, index) in courseData" :key="index">
          <option :value="item">{{ item.courseName }}</option>
        </view>
      </select>
      <view>开始日期</view>
      <picker mode="date" @change="bindStartDateChange" :value="arrangeForm.startDate">
        <view class="picker">{{ arrangeForm.startDate || '请选择开始日期' }}</view>
      </picker>
      <view>开始时间</view>
      <picker mode="time" @change="bindStartTimeChange" :value="arrangeForm.startTime">
        <view class="picker">{{ arrangeForm.startTime || '请选择开始时间' }}</view>
      </picker>
      <view>结束时间</view>
      <picker mode="time" @change="bindEndTimeChange" :value="arrangeForm.endTime">
        <view class="picker">{{ arrangeForm.endTime || '请选择结束时间' }}</view>
      </picker>

    </view>

    <view style="display: flex;margin-top: 60rpx;">
      <button class="button" @click="arrangeExam">确认</button>
    </view>
  </view>
</template>

<script>
import admin from "../../api/admin";
import teacher from "../../api/teacher";
import student from "../../api/student";

export default {
  data() {
    return {
      courseData:[],
      course:[],
      arrangeForm: {
        startDate: '',
        startTime: '',
        endTime: '',
        courseId: '',
        content: ''
      }
    }
  },
  onLoad() {
    this.courseList()
  },
  methods: {
    bindStartDateChange(e) {
      this.arrangeForm.startDate = e.detail.value;
    },
    bindStartTimeChange(e) {
      this.arrangeForm.startTime = e.detail.value;
    },
    bindEndTimeChange(e) {
      this.arrangeForm.endTime = e.detail.value;
    },
    //课程列表
    async courseList() {
      try {
        const res = await student.selectAllCourses()
        this.courseData = res.data
      } catch (e) {
        return Promise.reject(e)
      }
    },
    //考试安排
    async arrangeExam() {
      try {
        this.arrangeForm.content = this.course.courseName+'考试时间于'+
            this.arrangeForm.startDate+' '+this.arrangeForm.startTime+'开始，'+this.arrangeForm.endTime+'结束，'+
            '请同学们注意考试时间，及时复习！'
       const res = await teacher.arrangeExamination(this.course.id, this.arrangeForm.content)
        console.log('2222', res.code)
        uni.showToast({
          title: '考试已安排',
          icon: 'success',
          duration: 1000
        });
        this.course.courseName = ''
        this.arrangeForm = {
          startDate: '',
          startTime: '',
          endTime: '',
        }
      } catch (e) {
        return Promise.reject(e)
      }
    }
  }
}
</script>

<style>
.background {
  height: 100vh; /* 使背景占满整个视口高度 */
  width: 100%;
  background: white;
  flex-direction: column; /* 使子元素垂直排列 */
  display: flex;
  align-items: center; /* 垂直居中 */
}

.first-container {
  width: 90%;
  height: 60%;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  gap: 10px; /* 设置子元素之间的间距 */
  margin-top: 10px;
}

.first-container > view {
  font-weight: bold;
  font-size: 14px;
}

.first-container > input {
  width: 90%; /* 输入框和选择器宽度占满容器 */
  height: 40px; /* 高度 */
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 10px; /* 内边距 */
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.picker {
  width: 90%; /* 输入框和选择器宽度占满容器 */
  height: 40px; /* 高度 */
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 10px; /* 内边距 */
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  border: 0;
  background-color: #409EFF;
  color: white;
  width: 180rpx;
  font-size: 14px;
  margin-top: -30px;
}

</style>